<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/dl_reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/dl_shoppingCar.css"/>
		<title></title>
	</head>
	<style type="text/css">
	  /*矢量图标样式*/
		@font-face {font-family: "iconfont";
		  src: url('iconfont.eot?t=1468828242'); /* IE9*/
		  src: url('iconfont.eot?t=1468828242#iefix') format('embedded-opentype'), /* IE6-IE8 */
		  url('iconfont.woff?t=1468828242') format('woff'), /* chrome, firefox */
		  url('iconfont.ttf?t=1468828242') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
		  url('iconfont.svg?t=1468828242#iconfont') format('svg'); /* iOS 4.1- */
		}
		
		.iconfont {
		  font-family:"iconfont" !important;
		  font-size:.6rem;
		  font-style:normal;
		  -webkit-font-smoothing: antialiased;
		  -webkit-text-stroke-width: 0.2px;
		  -moz-osx-font-smoothing: grayscale;
		}
	</style>
	<body>
		
		<nav class="clearfix">
			<a href="###" class="iconfont">&#xf007a;</a>
			<!--<i class="iconfont">&#xf007a;</i>-->
			<p>购物车</p>
			<div id="edit">
				编辑
			</div>
		</nav>
		<div id="content">
			<ul>
				<li class="clearfix">
					<!--<form action="###">
						<input type="checkbox" name="check" id="check" value=""  style="display: inline-block;"/>
					</form>-->
					<!-- 小圆圈 -->
					<section ></section>
					<a href="###" class="clearfix"><img src="img/2-1.png"/></a>
					<div>
						<p>这啥玩意儿请描述</p>
						<p>精选啥葱,咋滴好,请描述</p>
						<div class="price clearfix">
							<div id="num">
								8.00
							</div>
							<div class="number clearfix">
								<section id="less">-</section>
								<section id="numb">2</section>
								<section id="more">+</section>
							</div>
						</div>
					</div>
				</li>
				<li class="clearfix">
					<section></section>
					<a href="###" class="clearfix"><img src="img/2-1.png"/></a>
					<div>
						<p>这啥玩意儿请描述</p>
						<p>精选啥葱,咋滴好,请描述</p>
						<div class="price clearfix">
							<div id="num">
								$8.00
							</div>
							<div class="number clearfix">
								<section id="less">-</section>
								<section id="numb">2</section>
								<section id="more">+</section>
							</div>
						</div>
					</div>
				</li>
				<li class="clearfix">
					<section></section>
					<a href="###" class="clearfix"><img src="img/2-1.png"/></a>
					<div>
						<p>这啥玩意儿请描述</p>
						<p>精选啥葱,咋滴好,请描述</p>
						<div class="price clearfix">
							<div id="num">
								$8.00
							</div>
							<div class="number clearfix">
								<section id="less">-</section>
								<section id="numb">2</section>
								<section id="more">+</section>
							</div>
						</div>
					</div>
				</li>
				<li class="clearfix">
					<section></section>
					<a href="###" class="clearfix"><img src="img/2-1.png"/></a>
					<div>
						<p>这啥玩意儿请描述</p>
						<p>精选啥葱,咋滴好,请描述</p>
						<div class="price clearfix">
							<div id="num">
								$8.00
							</div>
							<div class="number clearfix">
								<section id="less">-</section>
								<section id="numb">2</section>
								<section id="more">+</section>
							</div>
						</div>
					</div>
				</li>
				<li class="clearfix">
					<section></section>
					<a href="###" class="clearfix"><img src="img/2-1.png"/></a>
					<div>
						<p>这啥玩意儿请描述</p>
						<p>精选啥葱,咋滴好,请描述</p>
						<div class="price clearfix">
							<div id="num">
								$8.00
							</div>
							<div class="number clearfix">
								<section id="less">-</section>
								<section id="numb">2</section>
								<section id="more">+</section>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<footer>
			<div class="clearfix">
				<section id="all"></section>
				<p class="all">全选</p>
				<div class="counting">
					<p>合计: 
						<span id="count_sum">
							$0:00
						</span>
					</p>
					<p>
						<!-- 总额: -->
						<span>
							<!-- $21:00 -->
						</span>
					</p>
				</div>
				<div class="goCount">
					去结算(<span id="count">
						0
					</span>)
				</div>
			</div>
		</footer>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/dl_bottom_nav_public.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//给单个button添加事件
			$num=0;
			$t=0;
			$input_bol = $('input').toggleClass('active');
			$('#content li>section').click(function(){
				$('input').toggleClass('active');
				$(this).toggleClass('active');
				$('#content li>section').each(function(){
					if(!$(this).hasClass('active')){
						$('#all').removeClass('active');
					}else{
						$('#all').addClass('active');
					}
				})
				$('#count').html(function(){
					$num+=1;
					return $num;
				})
			})
		//给全选button添加事件
			$('#all').click(function(){
				$('#content li>section').each(function(){
					if(!$(this).hasClass('active')){
						$('#content li>section').addClass('active');
						$('#all').addClass('active');
						return false;
					}
					else{
						$(this).removeClass("active");
						$('#all').removeClass('active');
					}
				})
				$('#count').html(function(){
					$bol = $('#all').hasClass('active');
					if ($bol) {
						$num=$('#content li>section').size();
						return $num;
					}else {
						$num=0;
						return $num;
					}
					
				})
				$sum = $('#num').html()*$('#numb').html();
				$t = $('#content li>section').size()*$sum;
				$('#count_sum').html('$'+$t);
			})

			
			$i = 0;//记录商品的数量
		$('.number #more').on('click',function () {
			$i++;
			$('#numb').html($i);
		})
		$('.number #less').on('click',function () {
			$i--;
			if ($i<=0) {
				$i=0;
			}
			$('#numb').html($i);
		})


// 计算总额：
			// $('#content li>section').on('click',function () {
			// 	$('#content li>section').each(function () {
			// 		$sum = $('#num').html()*$('#numb').html();
			// 	})
			// })




		// $index = 0;
		// // 添加或取消选择
		// 	$('section').on('click',function () {
		// 		$(this).toggleClass('active');
		// 		$('li>section').each(function () {
		// 			if (!$(this).hasClass('active')) {
		// 				$('#all').removeClass('active');
		// 			}else {
		// 				$('#all').addClass('active');
		// 			}
		// 		})
		// 		// $('#count').html(function () {
		// 		// 	$index+=1;
		// 		// 	return $index;
		// 		// })
		// 	})

			

		// 	// 全选按钮

		// 	$('#all').on('click',function () {
		// 		$('#content li>section').each(function () {
		// 			$('#content li>section').addClass('active');
		// 			if (!$(this).hasClass('active')) {
		// 				$('#all').removeClass('active');
		// 			}else {
		// 				$('#all').addClass('active');
		// 			}
		// 		})
		// 		$('#all').addClass('active');
				
		// 	})
			


			
			
		</script>
	</body>
</html>
